<template>
	<view>
		<view class="mine">
			<view class="user">
				<view class="avatar1">
					<view class="avatar2">
						<view class="avatar3"><image class="avatar" src="@/static/img/boy.png" /></view>
					</view>
				</view>
				<view class="info">
					<view class="name">
						<view>{{ user.username }}</view>
					</view>
				</view>
			</view>
			<view class="content">
				<u-cell-group :border="false">
					<u-cell-item icon="file-text" title="个人信息" @click="gotoUser"></u-cell-item>
					<u-cell-item icon="lock" title="修改密码" @click="changePassword"></u-cell-item>
					<u-cell-item
						icon="minus-circle"
						title="注销登录"
						@click="logout"
						:border-bottom="false"
					></u-cell-item>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
import * as auth from '@/api/auth.js';
export default {
	data() {
		return {
			user: {}
		};
	},
	onShow(option) {
		auth.currentUser().then(res => {
			if (res.code != 200) {
				uni.reLaunch({
					url: '../login/login/index'
				});
			} else {
				this.user = res.data;
			}
		});
	},
	methods: {
		// 注销
		logout() {
			uni.showModal({
				title: '提示',
				content: '确定注销此账户？',
				success: function(res) {
					if (res.confirm) {
						auth.logout();
						//清除token：lifeData
						uni.setStorageSync('lifeData', '');
						uni.reLaunch({
							url: '../login/login/index'
						});
					} else if (res.cancel) {
						console.log(111);
					}
				}
			});
		},
		// 前往个人信息
		gotoUser() {
			let user = encodeURIComponent(JSON.stringify(this.user));
			uni.navigateTo({
				url: '/pages/account/personalDetail/index?user=' + user
			});
		},
		// 修改密码
		changePassword() {
			uni.navigateTo({
				url: '/pages/account/changePassword/index'
			});
		}
	}
};
</script>

<style scoped lang="scss">
.mine {
	height: 100vh;
	background-color: #f4f4f4;
	.user {
		height: 400rpx;
		background-image: linear-gradient(to top, #209cff 0%, #68e0cf 100%);
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		border-bottom-left-radius: 5%;
		border-bottom-right-radius: 5%;
		.avatar1 {
			width: 220rpx;
			height: 220rpx;
			border-radius: 50%;
			border: #e5e5e5 1rpx solid;
			display: flex;
			justify-content: center;
			align-items: center;
			.avatar2 {
				width: 190rpx;
				height: 190rpx;
				border-radius: 50%;
				border: #ffffff 1rpx solid;
				display: flex;
				justify-content: center;
				align-items: center;
				.avatar3 {
					display: flex;
					justify-content: center;
					align-items: center;
					image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 50%;
					}
				}
			}
		}
	}
	.user .info {
		margin-top: 30rpx;
		color: #ebe8ed;
	}
	.content {
		position: relative;
		top: -70rpx;
		margin: 5%;
		padding: 5% 1%;
		background-color: #ffffff;
		border-radius: 20rpx;
	}
}
</style>
